<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>QQ聊天</title>
		<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>

		<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_471035_56wmy47l0dgta9k9.css"/>
	</head>

	<body>
		<div class="page-group">
		<div class="page  page-current" id='router1'>
			<div id="bei"></div>
			<header class="bar bar-nav ding">
			    <a class="icon pull-left open-panel" data-panel=".panel-left">
			    	<i class="nei"><img src="images/xioqin12.jpg"/></i>
			    </a>
			    <a class="icon pull-right" id="a" >
			       +
			    </a>
			    <h1 class="title">消息</h1>
			    
			    <!--  +  定位-->
			<div class="ding1">
				<ul>
					<li>
		  				<i class="iconfont icon-chuangjian"></i>
		  				<span>创建群聊</span>
		  			</li>
		  			<li>
		  				<i class="iconfont icon-chuangjianren"></i>
		  				<span>加好友/群</span>
		  			</li>
		  			<li>
		  				<i class="iconfont icon-richscan_icon"></i>
		  				<span>扫一扫</span>
		  			</li>
		  			<li>
		  				<i class="iconfont icon-mianduimiankuaichuan"></i>
		  				<span>面对面快传</span>
		  			</li>
		  			<li>
		  				<i class="iconfont icon-fukuan"></i>
		  				<span>付款</span>
		  			</li>
		  			<li>
		  				<i class="iconfont icon-paishe"></i>
		  				<span>拍摄</span>
		  			</li>
				</ul>
			</div>
			</header>
			
			 <!--工具栏-->
		<nav class="bar bar-tab">
			<a class="tab-item external active" href="#router1">
			    <span class="icon icon-message"></span>
			    <span class="tab-label">消息</span>
			    <span class="badge">66</span>
			</a>
			<a class="tab-item " href="#router2">
			    <span class="icon icon-friends"></span>
			    <span class="tab-label">联系人</span>
			</a>
			<a class="tab-item " href="#router3">
			    <span class="icon icon-star"></span>
			    <span class="tab-label">动态</span>
			    <span class="badge">99+</span>
			</a>
			  
		</nav>
			
			
			
			
			
		  	<!--搜索栏-->
		    <div class="bar bar-header-secondary test">
			    <div class="searchbar">
				    <a class="searchbar-cancel">取消</a>
				    <div class="search-input">
				      <label class="icon icon-search" for="search"></label>
				      <input type="search" id='search' placeholder='输入关键字...'/>
				    </div>
			    </div>
			</div>
			
			
		  <!--内容-->
		    <div class="content">
		  	<!--列表-->
		  		
				<div class="list-block media-list inset pull-to-refresh-content" data-ptr-distance="55">
				    <!-- 默认的下拉刷新层 -->
						    <div class="pull-to-refresh-layer">
						        <div class="preloader"></div>
						        <div class="pull-to-refresh-arrow"></div>
						    </div>
				    <ul>
						    
					    <div class="card-container">
							<div class="card">
							</div>
						</div>
				    	<li class="list">
					        <a href="#" class="item-link item-content">
					            <div class="item-media"><img src="images/zhu.jpg" style='width: 2.2rem;'></div>
					            <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title red">M M </div>
						            </div>
						            <div class="item-subtitle small">盖世英雄。</div>
					            </div>
					        </a>
					        <span class="time">
					        	17：30
					        </span>
					        <span class="ci">1</span>
				        </li>
				        <li class="list">
					        <a href="#" class="item-link item-content">
					            <div class="item-media"><img src="images/yang.jpg" style='width: 2.2rem;'></div>
					            <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title">洋洋</div>
						            </div>
						            <div class="item-subtitle small">当才华撑不起你的未来时，请安静读书~~~</div>
					            </div>
					        </a>
					        <span class="time">
					        	17：29
					        </span>
					        <span class="ci">1</span>
				        </li>
				        <li class="list">
					        <a href="#" class="item-link item-content">
					            <div class="item-media"><img src="images/hai.jpg" style='width: 2.2rem;'></div>
					            <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title">海哥</div>
						            </div>
						            <div class="item-subtitle small">手机号码1350*****43</div>
					            </div>
					        </a>
					        <span class="time">
					        	17：28
					        </span>
					        <span class="ci">1</span>
				        </li>
				        <li class="list">
					        <a href="#" class="item-link item-content">
					            <div class="item-media"><img src="images/piao.jpg" style='width: 2.2rem;'></div>
					            <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title red">朴哥</div>
						            </div>
						            <div class="item-subtitle small">下班以后，一起吃小肥羊</div>
					            </div>
					        </a>
					        <span class="time">
					        	17：27
					        </span>
					        <span class="ci gay">1</span>
				        </li>
				        <li class="list">
					        <a href="#" class="item-link item-content">
					            <div class="item-media"><img src="images/xin.jpg" style='width: 2.2rem;'></div>
					            <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title">鑫平</div>
						            </div>
						            <div class="item-subtitle small">来一首老歌配美酒~~~</div>
					            </div>
					        </a>
					        <span class="time">
					        	17：26
					        </span>
					        <span class="ci">1</span>
				        </li>
				       
				        <li class="list">
					        <a href="#" class="item-link item-content">
					            <div class="item-media"><img src="images/zhe.jpg" style='width: 2.2rem;'></div>
					            <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title">露</div>
						            </div>
						            <div class="item-subtitle small">love the way I go.</div>
					            </div>
					        </a>
					        <span class="time">
					        	17：23
					        </span>
					        <span class="ci">1</span>
				        </li>
				        <li class="list">
					        <a href="#" class="item-link item-content">
					            <div class="item-media"><img src="images/gong.jpg" style='width: 2.2rem;'></div>
					            <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title red">丅﹃步〝似乎很近つ</div>
						            </div>
						            <div class="item-subtitle small">哲人无忧，智者常乐！</div>
					            </div>
					        </a>
					        <span class="time">
					        	17：20
					        </span>
					        <span class="ci">1</span>
				        </li>
				    	<!--0-->
				    	<li class="list">
					        <a href="#" class="item-link item-content">
					            <div class="item-media"><img src="images/Q10.jpg" style='width: 2.2rem;'></div>
					            <div class="item-inner">
						            <div class="item-title-row">
						              <div class="item-title red">鹿晗</div>
						            </div>
						            <div class="item-subtitle small">大家好，给大家介绍一下，她是我的女朋友@关晓彤。</div>
					            </div>
					        </a>
					        <span class="time">
					        	13：30
					        </span>
					        <span class="ci">1</span>
				        </li>
				        <!--1-->
				        <li class="list">
					        <a href="#" class="item-link item-content">
					          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
					          <div class="item-inner">
					            <div class="item-title-row">
					                <div class="item-title">QQ看点</div>
					            </div>
					            <div class="item-subtitle small">身高多少该留多长的头发，你留对了吗?</div>
					          </div>
					        </a>
					        <span class="time">
					        	13：08
					        </span>
					        <span class="ci">99+</span>
				        </li>
				        <!--2-->
				        <li class="list">
					        <a href="#" class="item-link item-content">
					          <div class="item-media"><img src="images/Q8.jpg" style='width: 2.2rem;'></div>
					          <div class="item-inner">
					            <div class="item-title-row">
					              <div class="item-title red">关晓彤</div>
					            </div>
					            <div class="item-subtitle small">大家好，他是我的男朋友@小鹿</div>
					          </div>
					        </a>
					        <span class="time">
					        	13：10
					        </span>
					        <span class="ci">1</span>
				        </li>
				        
				        <!--3-->
				        <li class="list">
					        <a href="#" class="item-link item-content">
					          <div class="item-media"><img src="images/Q2.jpg" style='width: 2.2rem;'></div>
					          <div class="item-inner">
					            <div class="item-title-row">
					              <div class="item-title">刘亦菲</div>
					            </div>
					            <div class="item-subtitle small">我们一起动漫吧~</div>
					          </div>
					        </a>
					        <span class="time">
					        	中午12：42
					        </span>
					        <span class="ci gay">2</span>
				        </li>
				        <!--4-->
				        <li class="list">
					        <a href="#" class="item-link item-content">
					          <div class="item-media"><img src="images/Q3.jpg" style='width: 2.2rem;'></div>
					          <div class="item-inner">
					            <div class="item-title-row">
					              <div class="item-title">上官金</div>
					            </div>
					            <div class="item-subtitle small">明天要下雨了~</div>
					          </div>
					        </a>
					        <span class="time">
					        	上午10：30
					        </span>
					        <span class="ci gay">8</span>
				        </li>
				        <!--5-->
				        <li class="list">
					        <a href="#" class="item-link item-content">
					          <div class="item-media"><img src="images/Q4.jpg" style='width: 2.2rem;'></div>
					          <div class="item-inner">
					            <div class="item-title-row">
					              <div class="item-title red">陈奕迅</div>
					            </div>
					            <div class="item-subtitle small">十年之后.....</div>
					          </div>
					        </a>
					        <span class="time">
					        	上午9：55
					        </span>
					        <span class="ci gay">6</span>
				        </li>
				        <!--6-->
				        <li class="list">
					        <a href="#" class="item-link item-content">
					          <div class="item-media"><img src="images/Q5.jpg" style='width: 2.2rem;'></div>
					          <div class="item-inner">
					            <div class="item-title-row">
					              <div class="item-title">小可爱</div>
					            </div>
					            <div class="item-subtitle small">无敌可爱呆萌尽显惹人喜欢</div>
					          </div>
					        </a>
					        <span class="time">
					        	上午8：57
					        </span>
					        <span class="ci gay">1</span>
				        </li>
				        <!--7-->
				        <li class="list">
					        <a href="#" class="item-link item-content">
					          <div class="item-media"><img src="images/Q6.jpg" style='width: 2.2rem;'></div>
					          <div class="item-inner">
					            <div class="item-title-row">
					              <div class="item-title">老顽童</div>
					            </div>
					            <div class="item-subtitle small">山重水复疑无路，柳暗花明又一村。</div>
					          </div>
					        </a>
					        <span class="time">
					        	上午8：33
					        </span>
					        <span class="ci">1</span>
				        </li>
				        <!--8-->
				        <li class="list">
					        <a href="#" class="item-link item-content">
					          <div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
					          <div class="item-inner">
					            <div class="item-title-row">
					              <div class="item-title">汪峰</div>
					            </div>
					            <div class="item-subtitle small">我要飞得更高！！！！</div>
					          </div>
					        </a>
					        <span class="time">
					        	上午8：30
					        </span>
					        <span class="ci">3</span>
				        </li>
				        <!--9-->
				        <li class="list">
					        <a href="#" class="item-link item-content">
					          <div class="item-media"><img src="images/Q1.jpg" style='width: 2.2rem;'></div>
					          <div class="item-inner">
					            <div class="item-title-row">
					              <div class="item-title red">刘同</div>
					            </div>
					            <div class="item-subtitle small">哈哈哈哈这还是我当年看过的广告吗？已然完全忘记原来的台词了……[允悲]</div>
					          </div>
					        </a>
					        <span class="time">
					        	昨天18：30
					        </span>
					        <span class="ci gay">2</span>
				        </li>
				        
				    </ul>
				</div>
			
			
		    </div> <!--content-->
		  
		</div> <!--page1-->
		
			<!-- 其他的单个page2内联页 -->
		    <div class="page" id='router2'>
		
				<header class="bar bar-nav ding">
					<a class="icon pull-left open-panel" data-panel=".panel-left">
						<i class="nei"><img src="images/xioqin12.jpg"/></i>
					</a>
					<a class="icon pull-right" id="a" href="indexl.html">
						添加
					</a>
					<h1 class="title">联系人</h1>
			
					
				</header>
			
				<!--工具栏-->
				<nav class="bar bar-tab">
					<a class="tab-item" href="#router1">
						<span class="icon icon-message"></span>
						<span class="tab-label">消息</span>
						<span class="badge">66</span>
					</a>
					<a class="tab-item active" href="#router2">
						<span class="icon icon-friends"></span>
						<span class="tab-label">联系人</span>
					</a>
					<a class="tab-item " href="#router3">
						<span class="icon icon-star"></span>
						<span class="tab-label">动态</span>
						<span class="badge">99+</span>
					</a>
			
				</nav>
			
				<!--搜索栏-->
				<div class="bar bar-header-secondary test">
					<div class="searchbar">
						<a class="searchbar-cancel">取消</a>
						<div class="search-input">
							<label class="icon icon-search" for="search"></label>
							<input type="search" id='search' placeholder='输入关键字...' />
						</div>
					</div>
				</div>
			
				<!--内容 content2-->
				<div class="content">
					<p class="contentp">新朋友
						<i class="iconfont icon-iconfontyoujiantou new"></i></p>
					<!--列表-->
					<div class="buttons-tab">
					    <a href="#tab1" class="tab-link active button">好友</a>
					    <a href="#tab2" class="tab-link button">群</a>
					    <a href="#tab3" class="tab-link button">多人聊天</a>
					    <a href="#tab4" class="tab-link button">设备</a>
					    <a href="#tab5" class="tab-link button">通讯录</a>
					    <a href="#tab6" class="tab-link button">公众号</a>
					  </div>
					  <div class="content-block">
					    <div class="tabs">
					      <div id="tab1" class="tab active">
					        <div class="content-block">
					            <div class="list-block media-list content2a">
								    <ul>
								      <li>
								        <div class="item-content">
								          <div class="item-inner">
								            <div class="item-title-row">
								               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">特别关注</span></a>
								               <span class="ding2">10/10</span>
								            </div>
								            <div class="item-title-row">
								               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">高中同学</span></a>
								               <span class="ding2">13/88</span>
								            </div>
								            <div class="item-title-row">
								               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">好友</span></a>
								               <span class="ding2">77/100</span>
								            </div>
								            <div class="item-title-row">
								               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">我的好友</span></a>
								               <span class="ding2">20/60</span>
								            </div>
								            <div class="item-title-row">
								               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">我的好友</span></a>
								               <span class="ding2">6/28</span>
								            </div>
								            <div class="item-title-row">
								               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">我的好友</span></a>
								               <span class="ding2">88/98</span>
								            </div>
								            <div class="item-title-row">
								               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">我的好友</span></a>
								               <span class="ding2">66/88</span>
								            </div>
								            <div class="item-title-row">
								               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">我的好友</span></a>
								               <span class="ding2">66/108</span>
								            </div>
								            <div class="item-title-row">
								               <a class="item-title"><i class="iconfont icon-iconfontyoujiantou"></i><span class="content2i black">我的好友</span></a>
								               <span class="ding2">68/78</span>
								            </div>
								            
								          </div>
								        </div>
								      </li>
								    </ul>
								</div>
					        </div>
					      </div>
					      <div id="tab2" class="tab">
					        <div class="content-block">
					            <div class="list-block media-list content2a">
					            	<ul>
										<li>
											<div class="item-content">
									          	<div class="item-inner">
										            <div class="item-title-row">
										               <a class="item-title"><i class="iconfont icon-icon1460189708222"></i><span class="content2i black">创建群组</span></a>
										              
										            </div>
									          	</div>
									        </div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">大牛科技</div>
													</div>
													
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">桃花源</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">17级高三（8）班群</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">花样年华</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">桃花源</div>
													</div>
												</div>
											</div>
										</li>
										
									</ul>
									
								</div>
					        </div>
					      </div>
					      <div id="tab3" class="tab">
					        <div class="content-block">
					          <div class="list-block media-list content2a">
					            	<ul>
										<li>
											<div class="item-content">
									          	<div class="item-inner">
										            <div class="item-title-row">
										               <a class="item-title"><i class="iconfont icon-icon1460189708222 nn"></i><span class="content2i black">创建多人聊天</span></a>
										              
										            </div>
									          	</div>
									        </div>
										</li>
										
									</ul>
									
								</div>
					        </div>
					      </div>
					      <div id="tab4" class="tab">
					        <div class="content-block">
					         	<div class="list-block media-list content2a">
									<ul>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">我的电脑</div>
													</div>
													<div class="item-subtitle">[在线]无需数据线，手机轻松传文件到.....</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">发现新设备</div>
													</div>
													<div class="item-subtitle">搜索附件的设备，手机轻松传文件到.....</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">无题</div>
													</div>
													<div class="item-subtitle">无敌是多么多么的寂寞.....</div>
												</div>
											</div>
										</li>
									</ul>
								</div> 
					          
					        </div>
					      </div>
					      <div id="tab5" class="tab">
					        <div class="content-block">
					            <div class="list-block media-list content2a">
									<ul class="list1">
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">项羽</div>
													</div>
													<div class="item-subtitle">[4G在线]</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin9.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">玉兔</div>
													</div>
													<div class="item-subtitle">[wifi在线]</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin6.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">柳岩</div>
													</div>
													<div class="item-subtitle">[4G在线]</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">葫芦娃</div>
													</div>
													<div class="item-subtitle">[wifi在线]</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin6.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">白羊</div>
													</div>
													<div class="item-subtitle">[4G在线]</div>
												</div>
											</div>
										</li>
										
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">周星驰</div>
													</div>
													<div class="item-subtitle">[wifi在线]</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin6.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">刘亦菲</div>
													</div>
													<div class="item-subtitle">[4G在线]</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">时光</div>
													</div>
													<div class="item-subtitle">[wifi在线]</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">吴莉</div>
													</div>
													<div class="item-subtitle">[4G在线]</div>
												</div>
											</div>
										</li>
									</ul>
								</div>
					        </div>
					      </div>
					      <div id="tab6" class="tab">
					        <div class="content-block">
						        <div class="list-block media-list content2a">
					            	<ul>
					            		<!--A-->
										<li>
											<div class="item-content">
									          	<div class="item-inner">
										            <div class="item-title-row">
										               <a class="item-title"><span class="content2i black">A</span></a>
										            </div>
									          	</div>
									        </div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">爱情</div>
													</div>
													
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">爱情人生</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">爱文化</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/Q7.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">爱立信</div>
													</div>
												</div>
											</div>
										</li>
										<!--B-->
										<li>
											<div class="item-content">
									          	<div class="item-inner">
										            <div class="item-title-row">
										               <a class="item-title"><span class="content2i black">B</span></a>
										            </div>
									          	</div>
									        </div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin6.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">部落联盟</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin6.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">博客说</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin6.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">部落文化</div>
													</div>
												</div>
											</div>
										</li>
										
										
										<!--C-->
										<li>
											<div class="item-content">
									          	<div class="item-inner">
										            <div class="item-title-row">
										               <a class="item-title"><span class="content2i black">C</span></a>
										            </div>
									          	</div>
									        </div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">彩票</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">车的世界</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">吃喝玩乐</div>
													</div>
												</div>
											</div>
										</li>
										
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">桃花源</div>
													</div>
												</div>
											</div>
										</li>
										<!--D-->
										<li>
											<div class="item-content">
									          	<div class="item-inner">
										            <div class="item-title-row">
										               <a class="item-title"><span class="content2i black">D</span></a>
										            </div>
									          	</div>
									        </div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin11.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">苹果</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin6.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">香蕉</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin6.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">西瓜</div>
													</div>
												</div>
											</div>
										</li>
										
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin11.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">樱桃</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">桃子</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">火龙果</div>
													</div>
												</div>
											</div>
										</li>
										<li>
											<div class="item-content">
												<div class="item-media"><img src="images/xioqin5.jpg" style='width: 2.2rem;'></div>
												<div class="item-inner">
													<div class="item-title-row">
														<div class="item-title">雪梨</div>
													</div>
												</div>
											</div>
										</li>
										
										
									</ul>
									
								</div>
					        </div>
					      </div>
					      
					    </div>
					  </div>
		
				</div><!--content2-->
		
		</div><!--page2-->
					
			<!-- 其他的单个page3内联页 -->
		    <div class="page" id='router3'>
		
				<header class="bar bar-nav ding">
					<a class="icon pull-left open-panel" data-panel=".panel-left">
						<i class="nei"><img src="images/xioqin12.jpg"/></i>
					</a>
					<a class="icon pull-right" id="a" href="indexdong.html">
						更多
					</a>
					<h1 class="title" >动态</h1>
			
					
				</header>
			
				<!--工具栏-->
				<nav class="bar bar-tab">
					<a class="tab-item" href="#router1">
						<span class="icon icon-message"></span>
						<span class="tab-label">消息</span>
						<span class="badge">66</span>
					</a>
					<a class="tab-item " href="#router2">
						<span class="icon icon-friends"></span>
						<span class="tab-label">联系人</span>
					</a>
					<a class="tab-item active" href="#router3">
						<span class="icon icon-star"></span>
						<span class="tab-label">动态</span>
						<span class="badge">99+</span>
					</a>
			
				</nav>
			
				<!--搜索栏-->
				<div class="bar bar-header-secondary test">
					<div class="searchbar">
						<a class="searchbar-cancel">取消</a>
						<div class="search-input">
							<label class="icon icon-search" for="search"></label>
							<input type="search" id='search' placeholder='输入关键字...' />
						</div>
					</div>
				</div>
			
				<!--内容 content3-->
				<div class="content">
					<div class="content-3">
					 	<ul class="content-3a cf">
					 		<li>
					 			<i class="iconfont icon-kongjian" style="color:yellow" id="dongTai"></i><br />
					 			<span><a href="indexDongTai.html" style="color:#000000;display: block;">好友动态</a></span>
					 		</li>
					 		<li>
					 			<i class="iconfont icon-icon" style="color:red"></i><br />
					 			<span>附近</span>
					 		</li>
					 		<li>
					 			<i class="iconfont icon-xingqubula" style="color:yellow"></i><br />
					 			<span>兴趣部落</span>
					 		</li>
					 	</ul>
					</div>
					 
					<div class="content-3s">
					 	<ul>
					 		<li>
					 			<i class="iconfont icon-kongjian" style="color:blue"></i>
					 			<span>校园</span>
					 			<span class="ding3"><i class="iconfont icon-xiangyoudejiantou"></i></span>
					 		</li>
					 		<li>
					 			<i class="iconfont icon-guijirizhi" style="color:orange"></i>
					 			<span>日迹</span>
					 			<span class="ding3"><i class="iconfont icon-xiangyoudejiantou"></i></span>
					 		</li>
					 		<li>
					 			<i class="iconfont icon-peidiantubiaochakancedian" style="color:green"></i>
					 			<span>看点</span>
					 			<span class="ding3"><i class="iconfont icon-xiangyoudejiantou"></i></span>
					 		</li>
					 		<li>
					 			<i class="iconfont icon-kongjian" style="color:green"></i>
					 			<span>音乐</span>
					 			<span class="ding3"><i class="iconfont icon-xiangyoudejiantou"></i></span>
					 		</li>
					 		<li>
					 			<i class="iconfont icon-yundong" style="color:blue"></i>
					 			<span>运动</span>
					 			<span class="ding3"><i class="iconfont icon-xiangyoudejiantou"></i></span>
					 		</li>
					 		<li>
					 			<i class="iconfont icon-kongjian" style="color:blue"></i>
					 			<span>游戏</span>
					 			<span class="ding3"><i class="iconfont icon-xiangyoudejiantou"></i></span>
					 		</li>
					 		<li>
					 			<i class="iconfont icon-jingdongEqia-copy" style="color:red"></i>
					 			<span>京东</span>
					 			<span class="ding3"><i class="iconfont icon-xiangyoudejiantou"></i></span>
					 		</li>
					 		
					 		
					 		
					 	</ul>
					</div>
					 
					 
		
				</div><!--content3-->
		
		</div><!--page3-->
				
					
			
		
		</div> <!--page-group-->
		
		
		
		
		
		
		
		<!--侧边栏-->
		<div class="panel panel-left panel-reveal theme-dark bai content-block" id='panel-left-demo'>
		  	<div class="boxk close-panel">
		  		<p class="kk"><i class="nei"><img src="images/xioqin12.jpg"/></i>
		  			孙悟空</p>
		  		<span class="boxk-i">
		  			<i class="iconfont icon-yueliang2"></i>
			  		<i class="iconfont icon-yueliang2"></i>
			  		<i class="iconfont icon-yueliang2"></i>
			  		<i class="iconfont icon-star_full"></i>
			  		<i class="iconfont icon-star_full"></i>
		  		</span>
		  		<a class="lan">天空总是那么蓝，水总是那么清澈.</a>
		  		<li class="erwei"><i class="iconfont icon-erweima"></i></li>
		  	</div>	
		  	<div class="ll">
				<ul class="boxk-list">
					<li>
						<i class="iconfont icon-pinpaishangtubiao"></i>
						<span>了解会员特权</span>
					</li>
					<li>
						<i class="iconfont icon-6"></i>
						<span>QQ钱包</span>
					</li>
					<li>
						<i class="iconfont icon-gexinghua"></i>
						<span>个性装扮</span>
					</li>
					<li>
						<i class="iconfont icon-wodeshoucang"></i>
						<span>我的收藏</span>
					</li>
					<li>
						<i class="iconfont icon-xiangce"></i>
						<span>我的相册</span>
					</li>
					<li>
						<i class="iconfont icon-wodewenjianjia"></i>
						<span>我的文件</span>
					</li>
					<li>
						<i class="iconfont icon-WiFi"></i>
						<span>免流量特权</span>
					</li>
			
				</ul>
			</div>

			<div class="toop">
				<p>
					<a>
						<i class="iconfont icon-shezhi"></i>
						<span>设置</span>
					</a>
					<a class="ye">
						<i class="iconfont icon-yueliang2"></i>
						<span>夜间</span>
					</a>
				</p>
			</div>

			<div class="toop1">
				<span class="toop1-size">28<i class="iconfont icon-du"></i></span><br />
				<span>深圳</span>
			</div>

		</div><!--bai-->
		
		
		<script src="js/index.js"></script>
	</body>

</html>

